<template>
    <div style="height:100%;width:100%">
        <el-row class="mainContent order">
            <el-col :span="8" :offset="2" :xs="18" :sm="18" :md="10" :lg="8" :xl="8">
                <el-row>
                    <el-col :span="10" style="margin-bottom:10px;text-align:left">
                        梁先生旅行社
                    </el-col>
                </el-row>
                <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
                    <el-form-item label="联系人">
                        <el-col :span="10" :xs="22" :sm="18" :md="18" :lg="18" :xl="10" style="margin-bottom:10px;">
                            <el-input v-model="formLabelAlign.name" placeholder="输入联系人姓名"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="联系电话">
                        <el-col :span="10" :xs="22" :sm="18" :md="14" :lg="12" :xl="10" style="margin-bottom:10px;">
                            <el-input v-model="formLabelAlign.region" placeholder="输入联系电话"></el-input>
                        </el-col>
                    </el-form-item>
                </el-form>
                <el-row>
                    <el-col :span="12" class="text-lf">
                        乘车时间
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="text-align:left;">
                    <el-col :span="8" :xs="13" :sm="13" :md="13" :xl="8">
                        <el-date-picker v-model="supplyTime" type="datetime" placeholder="选择日期时间">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="10" :xs="13" :sm="13" :md="13" :xl="10">
                        <el-input placeholder="请输入航班号" clearable>
                        </el-input>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12" class="text-lf">
                        乘客信息
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="text-lf">
                    <el-col :span="8" :xs="13" :sm="13" :md="13" :xl="8">
                        <el-input placeholder="请输入联系人" clearable>
                        </el-input>
                    </el-col>
                    <el-col :span="10" :xs="13" :sm="13" :md="13" :xl="10">
                        <el-input type="textarea" :rows="2" autosize placeholder="乘客手机号码，多人请以逗号隔开">
                        </el-input>
                    </el-col>
                </el-row>
                <el-row class="text-lf">
                    <el-col :span="18">
                        <el-input type="textarea" :rows="4" autosize placeholder="请输入备注信息">
                        </el-input>
                    </el-col>
                </el-row>
            </el-col>

            <el-col :span="10" :offset="1" :xs="18" :sm="18" :md="10" :lg="12" :xl="10">
                <el-row>
                    <el-col :span="18" class="text-lf">
                        出发地
                    </el-col>
                    <el-col style="text-align:left;">
                        <div class="block" style="margin-bottom:20px;">
                            <area-select :level='2' type='text' v-model='depart'></area-select>
                        </div>
                    </el-col>
                    <el-col :span="18">
                        <el-input placeholder="请输入详细出发地址" clearable>
                        </el-input>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="18" class="text-lf">
                        目的地
                    </el-col>
                    <el-col class="text-lf">
                        <div class="block" style="margin-bottom:20px;">
                            <area-select :level='2' type='text' v-model='destination'></area-select>
                        </div>
                    </el-col>
                    <el-col :span="18">
                        <el-input placeholder="请输入详细目的地地址" clearable>
                        </el-input>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6">
                        <p>成人</p>
                        <el-input placeholder="请输入成人人数" clearable>
                        </el-input>
                    </el-col>
                    <el-col :span="6">
                        <p>儿童</p>
                        <el-input placeholder="请输入儿童人数" clearable>
                        </el-input>
                    </el-col>
                    <el-col :span="6">
                        <p>总人数</p>
                        <div>7人</div>
                    </el-col>
                    <el-col :span="24" style="text-align:left;">
                        <el-button type="primary" size='medium ' style="width:200px;height:60px;margin-top:40px;">确认提交</el-button>
                    </el-col>
                </el-row>

            </el-col>
             
        </el-row>
       
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            labelPosition: 'left',
            formLabelAlign: {
                name: '',
                region: '',
                type: ''
            },
            depart: [],
            destination: [],
            supplyTime: '',
        };
    }
}
</script>
<style>
div.area-select {
    height: 40px;
}

.area-select-wrap>div.area-select:first-child {
    margin-left: 0
}

.text-lf {
    text-align: left;
    margin-bottom: 10px;
}

.order input,
.order .area-select {
    margin-bottom: 10px;
}

.el-form-item {
    margin-bottom: 10px;
}
</style>
